<template>
    <transition name="animate__animated anmate__bounce" enter-active-class="animate__backInDown"
        leave-active-class="animate__backOutUp" appear>
        <div class="register-container">
            <div class="bg-image"></div>
            <el-card class="box-card" shadow="hover">
                <h1>TMS物流管理系统 - 注册</h1>
                <el-form :model="registerForm" status-icon :rules="registerFormRule" ref="loginForm" label-width="100px" 
                    class="demo-ruleForm">
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="registerForm.nickname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="passwordChecked">
                        <el-input type="password" v-model="registerForm.passwordChecked" autocomplete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="captcha" style="text-align:left">
                    <el-input v-model="registerForm.captcha" style="width:80%;" @keyup.enter.native="handleRegister()">
                    </el-input>
                    <img :src="captchaSrc" style="float:right" width="80px" height="40px" @click="getCaptchaImage()" />
                </el-form-item>
                </el-form>
                <el-button type="primary" @click="handleRegister()" style="width:80%" :loading="loadRegisterBtn">注册</el-button> <br>
                <el-button type="text" @click="handleToLogin()" style="float:right">去登录</el-button>
            </el-card>
        </div>
    </transition>
</template>

<script>
    import 'animate';
    import adminApi from '@/api/admin'
export default {
    name: 'Login',

    data() {
        return {
            captchaSrc:'',
            loadRegisterBtn: false,
            registerForm: {
                nickname: '',
                password: '',
                passwordChecked: '',
                phone: '',
                captcha: ''
            },
            registerFormRule: {
                nickname: [
                    { required: true, message: '昵称不能为空', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                ],
                passwordChecked: [
                    { required: true, message: '第二次密码不能为空', trigger: 'blur' },
                ],
                captcha: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' },
                ]
            }
        };
    },

    created() {
        // 获取验证码图片
        this.getCaptchaImage()
    },
    mounted() {

    },

    methods: {
        handleRegister() {
            this.loadRegisterBtn = true
            this.$message.success('注册成功！')
            setTimeout(() => {
                this.loadRegisterBtn = false
            }, 1000)
        },
        handleToLogin() {
            this.$router.push({ path: '/login' })
        },
        getCaptchaImage() {
            adminApi.GetCaptchaImage()
                .then(
                    (response) => {
                        this.captchaSrc = response.data.item
                    }
                )
        }
    },
};
</script>

<style scoped>
.register-container {
    width: 600px;
    height: 300px;
    margin-inline: auto;
    text-align: center;
    margin-top: 100px;
}

.bg-image {
    background: url('@/assets/back.jpg');
    background-size: 100vh;
}
</style>